<template>
  <div class="home">
    <breadcrumb-view />

    <div class="container">
      <div class="left-board">
        <el-scrollbar class="left-scrollbar">
          <!--左侧组件列表-->
          <div class="components-list">
            <div class="components-title">常用组件</div>
            <draggable
              class="components-draggable"
              :list="formItems"
              :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
              :clone="cloneComponent"
              draggable=".components-item"
              :sort="false"
              @start="onStart"
              @end="onEnd"
            >
              <div
                v-for="(element, index) in formItems"
                :key="index"
                class="components-item"
                @click="addComponent(element)"
              >
                <div
                  class="components-body"
                  :class="{ 'dynamicTable-tips': dynamicTableExist(element) }"
                >
                  <icon :code="element.compIcon" :text="element.compName" />
                </div>
              </div>
            </draggable>
            <!--<div class="components-title">布局组件</div>
          <draggable
            class="components-draggable"
            :list="layoutFormItems"
            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
            :clone="cloneComponent"
            draggable=".components-item"
            :sort="false"
            @start="onStart"
            @end="onEnd"
          >
            <div
              v-for="(element, index) in layoutFormItems"
              :key="index"
              class="components-item"
              @click="addComponent(element)"
            >
              <div class="components-body">
                <icon :code="element.compIcon" :text="element.compName" />
              </div>
            </div>
            </draggable>-->
            <div class="components-title">辅助组件</div>
            <draggable
              class="components-draggable"
              :list="assistFormItems"
              :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
              :clone="cloneComponent"
              draggable=".components-item"
              :sort="false"
              @start="onStart"
              @end="onEnd"
            >
              <div
                v-for="(element, index) in assistFormItems"
                :key="index"
                class="components-item"
                @click="addComponent(element)"
              >
                <div
                  class="components-body"
                  v-if="(element.fieldType != 'IdentityKey'&&element.fieldType != 'User')&&(element.fieldType != 'FlowStatus'&&element.fieldType != 'Organize')"
                >
                  <icon :code="element.compIcon" :text="element.compName" />
                </div>
              </div>
            </draggable>
          </div>
        </el-scrollbar>
      </div>
      <designer
        ref="designer"
        :list="designList"
        
        :formConfig="formConfig"
        :moduleId="moduleId"
        @clear="designList = []"
        @updateJSON="handlerUpdateJSON"
        :activeData="activeData"
      />
    </div>
  </div>
</template>
<script>
/**
 * 1.0版本
 */
import { api } from "../server/api";
import draggable from "vuedraggable";
import { formItems, assistFormItems, layoutFormItems } from "./custom/itemList";
import designer from "./designer";
import Icon from "./icon";
import { getSimpleId } from "./utils/IdGenerate";
import formConf from "./custom/formConf";
import breadcrumbView from "./breadcrumbView"
import { dynamicTableAllowedItems } from "./custom/formConf";
import { getDate, resetData } from "../untils/transfrom";
let tempActiveData;

export default {
  name: "formDesigner",
  components: {
    draggable,
    Icon,
    designer,
    breadcrumbView
  },
  data() {
    return {
      formItems: formItems,
      assistFormItems: assistFormItems,
      layoutFormItems: layoutFormItems,
      designList: [],
     
      allItems: [...formItems, ...assistFormItems, ...layoutFormItems],
      activeData: {},
      formConfig: formConf,
      moduleId: -1,
    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  mounted() {
    this.getDatils();
    
  },
  methods: {
    
    getDatils() {
      let tableId = this.$route.query.tableId;
      api.stdappTableDetail({ tableId }).then((res) => {
        // this.list = res;
        let { formItems, fieldLst, moduleId } = res;
        this.moduleId = moduleId;
        this.tableName = res.tableName;
        let arr = [];
        for (let i = 0; i < fieldLst.length; i++) {
          const element = fieldLst[i];
          let data = getDate(element.fieldType, this.allItems);
          let index = element.seqNo - 1;
          console.log(!arr[index]);
          if (!arr[index]) {
            arr[index] = resetData(data, element);
          } else {
          }
        }
          arr.forEach((val) => {
          if (val.fieldType === "CombineValue") {
            val.privateInfo = JSON.parse(val.privateInfo);
            val.privateInfo.user = JSON.stringify({
              text: val.fieldName,
              label: val.fieldName,
            });
            val.privateInfo = JSON.stringify(val.privateInfo);
            val.text=val.label
          }else if(val.fieldType === "HorizontalLine"||val.fieldType === "Tab"){
             val.text=val.label
          }
        });
        this.designList = arr;
        console.log(arr);
      });
    },
    back() {
      console.log("0");
      this.$router.go("-1");
    },
    addComponent(element) {},
    cloneComponent(origin) {
      const clone = JSON.parse(JSON.stringify(origin));
      if (!clone.layout) clone.layout = "colItem";
      if (clone.layout === "colItem" || clone.layout === "dynamicItem") {
        let uId = "fd_" + getSimpleId();
        clone.id = uId;
        clone._id = uId;
        tempActiveData = clone;
      } else {
        let uId = "row_" + getSimpleId();
        clone.id = uId;
        clone._id = uId;
        tempActiveData = clone;
      }
      this.$refs.designer.activeItem = tempActiveData;
    },
    onStart(obj) {},
    onEnd(obj) {
      if (obj.from !== obj.to) {
        this.activeData = tempActiveData;
        this.$refs.designer.activeItem = this.activeData;
        if (obj.to.className.indexOf("row-drag") < 0) {
          this.designList.splice(obj.newIndex, 0, this.activeData);
        }
      } else {
        this.$refs.designer.activeItem = {};
      }
    },
    getFormData() {
      return this.formData;
    },
    handlerUpdateJSON(json) {
      const jsonObject = JSON.parse(json);
      this.designList = [];
      this.designList = this.designList.concat(jsonObject.list);
    },
  },
  computed: {
    formData: function () {
      const list = this.designList;
      const config = this.formConfig;
      let formData = {};
      formData.list = list;
      formData.config = config;
      console.log(formData);
      return JSON.stringify(formData);
      //this.$emit('input',JSON.stringify(formData));
    },
    dynamicTableExist() {
      return function (element) {
        return (
          this.formConfig.dynamicTableAllowed &&
          this.designList.filter((item) => item.compType === "dynamicTable")
            .length > 0 &&
          dynamicTableAllowedItems.includes(element.compType)
        );
      };
    },
  },
  watch: {
    value(newVal) {
      if (newVal !== "") {
        const formData = JSON.parse(newVal);
        this.designList = formData.list;
        this.formConfig = formData.config;
      }
    },
  },
};
</script>
<style scoped>
.headerlist {
  display: flex;
  align-items: center;
  height: 100%;
}

.container {
  padding: 0px;
}
.dynamicTable-tips {
  border: 1px solid#F08080;
}
</style>
